<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_DOM操作-插入内容</title>
  <!-- 
  在 jQuery 中，DOM 操作是非常常见的任务，特别是插入内容。jQuery 提供了一些简洁的方法来方便地插入、替换和添加元素。
  一、常用的插入方法
   1.  `append()` 
  `append()`  方法用于将指定的内容添加到每个匹配元素的结尾。
  语法
  $(selector).append(content);
  示例
  $('#parent').append('<div>这是一个新 div</div>');
  在这个例子中，新的  `div`  元素被添加到 ID 为  `parent`  的元素的末尾。

   2.  `prepend()` 
  `prepend()`  方法用于将指定的内容添加到每个匹配元素的开头。
  语法
  $(selector).prepend(content);
  示例
  $('#parent').prepend('<div>这是一个新 div</div>');
  在这个例子中，新的  `div`  元素被添加到 ID 为  `parent`  的元素的开头。

   3.  `before()` 
  `before()`  方法用于在每个匹配元素之前插入指定的内容。
  语法
  $(selector).before(content);
  示例
  $('#child').before('<div>这是一个新 div</div>');
  在这个例子中，新的  `div`  元素被插入到 ID 为  `child`  的元素之前。

   4.  `after()` 
  `after()`  方法用于在每个匹配元素之后插入指定的内容。
  语法
  $(selector).after(content);
  示例
  $('#child').after('<div>这是一个新 div</div>');
  在这个例子中，新的  `div`  元素被插入到 ID 为  `child`  的元素之后。

   5.  `html()` 
  `html()`  方法用于获取或设置匹配元素的 HTML 内容。可以用它快速插入多个元素。
  语法
  $(selector).html(content);
  示例
  $('#parent').html('<div>新的 HTML 内容</div>');
  在这个例子中，ID 为  `parent`  的元素的内容被替换为新的 HTML 内容。

   6.  `replaceWith()` 
  `replaceWith()`  方法用于用指定的内容替换每个匹配元素。
  语法
  $(selector).replaceWith(content);
  示例
  $('#child').replaceWith('<div>这是替换后的新 div</div>');
  在这个例子中，ID 为  `child`  的元素被新的  `div`  元素替换。

  二、总结
  -  `append()` ：在匹配元素的结尾添加内容。
  -  `prepend()` ：在匹配元素的开头添加内容。
  -  `before()` ：在匹配元素之前插入内容。
  -  `after()` ：在匹配元素之后插入内容。
  -  `html()` ：获取或设置匹配元素的 HTML 内容。
  -  `replaceWith()` ：用新内容替换匹配元素。
  -->
</head>
<body>

  <ul id="list" class="panel" data-name="DOM操作" data-age="17">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      let $list = $('#list');
      $list.css('border', '1px solid red');
      // 1. ul尾部插入文本
      // 1.1. append() 方法向匹配元素集合中的每个元素末尾插入由参数指定的内容。
      $list.append('append我是文本');
      // 1.2 插入html字符串
      $list.append('<li>append我是新元素</li>');
      // 1.3 插入jQuery对象
      let $newLi = $('<li>append我是新元素$newLi</li>');
      $list.append($newLi);
      // 1.4 插入DOM对象
      let domLi = document.createElement('li');
      domLi.className = 'li-6';
      domLi.innerText = 'append我是新元素domLi';
      $list.append(domLi);
      
      // 2. ul头部插入文本
      // 2.1 prepend() 方法向匹配元素集合中的每个元素开头插入由参数指定的内容。
      $list.prepend('prepend我是文本');
      // 1.2 插入html字符串
      $list.prepend('<li>prepend我是新元素</li>');

      // 3. 在ul后面插入文本
      // 3.1 after() 方法在匹配元素集合中的每个元素后面插入由参数指定的内容。
      $list.after('after我是文本');
      // 3.2 插入html字符串
      $list.after('<li>after我是新元素</li>');

      // 4. 链式插入内容
      // 4.1 
      $('<li>链式插入1</li>')
        .addClass('li-7')
        .text('链式插入1')
        .appendTo($list)
        // .appendTo( $('ul') )
        // .prependTo( $('ul') )
        // .insertBefore( $('ul') )
        .insertAfter( $('ul') );

      // 4.2
      $('<li>链式插入2</li>')
        .addClass('li-8')
        .appendTo( document.querySelector('ul') )
        .insertAfter( $('ul') );

    })

  </script>
  
</body>
</html>